<template>
	<view class="bigbox">
		<!-- 控制高度 -->
		<view bar>

		</view>
		<view class="title">
			<!-- 版本 -->
			<!-- title -->
			<view class="name" f12 w600>
				消息列表
			</view>
		</view>
		<view class="chatList">
			<view class="QueryMessage">
				搜索
			</view>
			<view class="chatList-item" v-for="item, index in data.mesageList" :key="index" f12>
				<view class="chatList-item-iamge">
					<image :src="item.image">

					</image>
				</view>
				<view class="chatList-item-info">
				
					<view w600>
						{{ item.chatName }}
					</view>
					<view class="chatList-item-infotext">
						<test :style="{color:!item.isreading ? 'red':'#ccc'}">
							{{ item.isreading?"(已读)":'(未读)' }}
						</test>
						{{ item.chatcontent }}
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script setup>
import { reactive, ref } from "vue"
const data = reactive({
	mesageList: [
		{
			Groupchats: [],
			chatName: "张山",
			chatcontent: "你最近在忙什么事情,我找你有一点事情要做,看到麻烦及时回复 一下谢谢",
			image: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
			chatId: "20231114123564",
			isreading:false
		},
		{
			Groupchats: [],
			chatName: "张国立",
			chatcontent: "你最近在忙什么事情,我找你有一点事情要做,看到麻烦及时回复一下谢谢",
			image: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
			chatId: "20231114123564",
			isreading:true
		},
		{
			Groupchats: [],
			chatName: "雨季",
			chatcontent: "你最近在忙什么事情,我找你有一点事情要做,看到麻烦及时回复一下谢谢",
			image: "http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
			chatId: "20231114123564",
			isreading:false
		}
	]
})
</script>

<style lang="scss" scoped>
.bigbox {
	height: 100%;
	width: 100%;
	overflow: scroll;
}

.title {
	background: fff;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 35px;
}

.swiper-image {
	margin: 10px 15px 0;
	background: #1C37DC;
	height: 20%;
	min-height: 185px;
	border-radius: 15px;
}

.ListOfFeatures {
	margin: 0 15px;
}

.chatList {
	height: calc(100% - 35px);
	overflow: scroll;
}

.QueryMessage {
	height: 25px;
	display: flex;
	align-items: center;
	margin: 10px 15px 8px;
	border: 1px solid #ccc;
	border-radius: 15px;
	font-size: 12px;
	overflow: hidden;
	padding-left: 15px;
}

.chatList-item {
	height: 55px;
	margin: 0 5px 8px;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 0 5px;
}

.chatList-item-iamge {
	width: 50px;
	height: 50px;
	background: blue;
	flex-shrink: 0;
	overflow: hidden;
	>image{
		width: 100%;
		height: 100%;
	}	
}
.chatList-item-info{
	height: 100%;
	box-sizing: border-box;
	width: 100%;
	border-bottom:1px solid #ccc ;
	padding: 0 5px;
	overflow: hidden;
}
.chatList-item-infotext{
	text-overflow: ellipsis;
     white-space: nowrap; 
	overflow: hidden;
	margin-top: 5px;
}
</style>
